<script setup>
import LfDropdownPanel from '@/components/commonUI/LfDropdownPanel.vue'
import SubmitSelectedDiscussList from './SubmitSelectedDiscussList.vue'
import arrowIcon from '/imgs/commonIcons/arrow.svg'
import { useDiscussListQuery } from '@/composables/useTopicDataQuery'
const props = defineProps({
  onDiscussClick: Function,
  topicId: Number,
  selectedDiscussName: String,
})

const topicId = computed(() => props.topicId)

const discussDropdownRef = ref(null)

const handleDiscussClick = (id, name) => {
  props.onDiscussClick(id, name)

  discussDropdownRef.value.hidePanel()
}

const { data } = useDiscussListQuery(topicId)

// todo 分页
</script>

<template>
  <div class="relative h-fit">
    <LfDropdownPanel ref="discussDropdownRef">
      <div class="cursor-pointer bg-slate-200 flex-cc w-fit p-3 py-1 rounded-full gap-2 hover:bg-slate-300">
        <div :class="{ 'font-semibold': selectedDiscussName, 'text-[#73777c]': !selectedDiscussName }">
          {{ selectedDiscussName ? `#${selectedDiscussName}` : '请先选择话题' }}
        </div>
        <img :src="arrowIcon" alt="" />
      </div>

      <template #content>
        <SubmitSelectedDiscussList :data="data" :onDiscussClick="handleDiscussClick" />
      </template>
    </LfDropdownPanel>
  </div>
</template>

<style scoped lang="scss"></style>
